<template>
	<view style="padding-bottom: 150rpx;" v-if="pageShow">
		<!-- 已取消 -->
		<view class="mainpadding flexbetween" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==5">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">订单关闭</view>
				<view class="xiaobai strongtext margin_top">订单被取消，期待下次能和您亲密接触！</view>
			</view>
			<u-icon name="close-circle-fill" color="#ffffff" size="40"></u-icon>
		</view>
		<!-- 待支付 -->
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;" v-if="dataAll.state==1">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">待支付</view>
				<view class="xiaobai strongtext margin_top">超时未支付系统将自动取消
				</view>
			</view>
			
		</view>
		<!-- 待发货 -->
		<view class="mainpadding flexbetween" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==2">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">待发货</view>
				<view class="xiaobai strongtext margin_top">仓库处理中，正在安排为您发货！</view>
			</view>
			<u-icon name="car-fill" color="#ffffff" size="40"></u-icon>
		</view>
		<!-- 待收货 -->
		<view class="mainpadding flexbetween" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==3">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">待收货</view>
				<view class="xiaobai strongtext margin_top">物流运输中，请耐心等待！</view>
			</view>
			<u-icon name="car-fill" color="#ffffff" size="40"></u-icon>
		</view>
		<!--待评价 -->
		<view class="mainpadding flexleft" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==4 && dataAll.goods[0].comment_status==1">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">待评价</view>
				<view class="xiaobai strongtext margin_top">您的评价是我们前进的动力，期待您的评价！</view>
			</view>
		</view>
		<!-- 已完成 -->
		<view class="mainpadding flexbetween" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==4 && dataAll.goods[0].comment_status==2">
			<view class="">
				<view class="titletext sanshier xiaobai fonweight">已完成</view>
				<view class="xiaobai strongtext margin_top">订单已完成，期待您的再次光临！</view>
			</view>
			<u-icon name="checkmark-circle-fill" color="#ffffff" size="40"></u-icon>
		</view>
		<view class="mainpadding flexbetween" style="background-color: #1ba95b;min-height: 170rpx;"
			v-if="dataAll.state==6">
			<view class="titletext sanshier xiaobai fonweight">已退款</view>
		</view>
		<view class="mainpadding ffffff">
			<view class="flexleft">
				<view class="titletext sanshier fonweight margin_right2">{{dataAll.address.name}}</view>
				<view class="strongtext">{{dataAll.address.mobile}}</view>
			</view>
			<view class="strongtext margin_top">{{dataAll.address.address}}</view>
		</view>
		<view class="mainpadding ffffff" v-if="dataAll.express_name">
			<view class="flexbetween">
				<view class="titletext sanshier fonweight">物流信息</view>
				<view class="flexright" @click="copycontent">
					<u-icon name="点击复制" color="#1ba95b" size="16"></u-icon>
				</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="strongtext">快递公司</view>
				<view class="strongtext">{{dataAll.express_name}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="strongtext">快递单号</view>
				<view class="strongtext	">{{dataAll.express_no}}</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff">
			<view class="flexbetween" v-for="item in dataAll.goods" :key="item.id">
				<view class="shilitu margin_right2">
					<image :src="item.image_text" mode=""></image>
				</view>
				<view class="flexcolumn" style="width: 69%;align-items: flex-start;height: 160rpx;justify-content: space-between;">
					<view class="titletext xiaohei fonweight yhxk">{{item.title}}</view>
					<view class="flexbetween margin_top2" style="width: 100%;">
						<view class="flexleft" >
							<view class="sanshier xiaohong fonweight">{{item.score}}</view>
							<view class="strongtext xiaohong nofonweight">分</view>
							<view class="sanshier xiaohong fonweight" v-if="Number(item.price)">+￥{{item.price}}</view>
						</view>
						<view class="titletext">x{{item.number}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mainpadding_top ffffff" v-if="dataAll.remarks">
			<view class="titletext sanshier fonweight">订单备注</view>
			<view class="strongtext margin_top">{{dataAll.remarks}}</view>
		</view>
		<view class="mainpadding_top ffffff">
			<view class="titletext sanshier fonweight">订单信息</view>
			<view class="flexbetween margin_top">
				<view class="strongtext">订单金额：</view>
				<view class="strongtext">￥{{dataAll.pay_price}}元</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="strongtext">积分：</view>
				<view class="strongtext">{{dataAll.pay_score}}分</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="strongtext">订单编号：</view>
				<view class="strongtext">{{dataAll.order_no}}</view>
			</view>
			<view class="flexbetween margin_top">
				<view class="strongtext">创建时间：</view>
				<view class="strongtext">{{dataAll.createtime_text}}</view>
			</view>
			<view class="flexbetween margin_top" v-if="dataAll.state!=1">
				<view class="strongtext">支付方式：</view>
				<view class="strongtext">{{returnpayway(dataAll.pay_type)}}</view>
			</view>
			<view class="flexright margin_top" v-if="dataAll.state!=1">
				<view class="sanshier xiaohong fonweight">实付款：{{dataAll.pay_price}}</view>
				<view class="strongtext xiaohong nofonweight">分</view>
				<view class="sanshier xiaohong fonweight">+￥{{dataAll.pay_score}}</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding">
			<view class="flexbetween" v-if="dataAll.state==1">
				<view class="sanshier xiaohong fonweight flexleft">
					<u-count-down :time="Number(new Date())-dataAll.pay_end_time*1000" format="HH:mm:ss"></u-count-down>
					后自动取消
				</view>
				<view class="flexright">
					<view class="baibtn margin_right2" @click="cancelitem(listid)">取消订单</view>
					<view class="lvbtn" @click="payorder">继续付款</view>
				</view>
			</view>
			<view class="flexright">
				<view class="baibtn" v-if="dataAll.state==2"  @click="cancelitem(listid)">取消订单</view>
				<!-- 退款状态:0=未退款,1=退款中,2=待退货,3=退款完成,4=退款关闭,5=退款被拒 -->
				<view class="baibtn" v-if="dataAll.state==3 && dataAll.goods[0].refund_status==0"  @click="shenqingsh(listid)">申请售后</view>
				<!-- <view class="baibtn" v-if="dataAll.state==3 && dataAll.goods[0].refund_status!=0"  @click="shenqingsh(listid)">查看售后详情</view> -->
				<view class="lvbtn margin_left" v-if="dataAll.state==3"  @click="shouhuo(listid)">确认收货</view>
				<view class="baibtn" v-if="dataAll.state==5 || dataAll.state==4"  @click="delitem(listid)">删除订单</view>
				<view class="lvbtn margin_left" v-if="dataAll.state==4 && dataAll.goods[0].comment_status==1" @click="pingjia(listid)">立即评价</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid:"",
				dataAll: {},
				pageShow: false
			}
		},
		onLoad(options) {
			this.listid = options.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			shenqingsh(id){
				uni.navigateTo({
					url:"/pages_mypage/shenqingsh?id="+id+"&goods_id="+this.dataAll.goods[0].id
				})
			},
			returnpayway(val) {
				if (val == 0) return "余额支付"
				if (val == 1) return "微信支付"
				if (val == 2) return "支付宝支付"
			},
			pingjia(id){
				uni.navigateTo({
					url:"/pages_mypage/pingjia?type=1&id="+id
				})
			},
			copycontent() {
				let text = this.dataAll.express_name + this.dataAll.express_no
				uni.setClipboardData({
					data: text, //要被复制的内容
					success: () => {
						//复制成功的回调函数
						httpRequest.toast("复制成功")
					}
				});
			},
			payorder(item){
				uni.navigateTo({
					url: '/pages_mypage/zhifu?id='+this.dataAll.id+"&price="+this.dataAll.pay_price+"&total_score="+this.dataAll.pay_score
				})
			},
			shouhuo(id) {
				httpRequest.modal('提示', '是否确认收货？', true, (res) => {
					if (res) {
						httpRequest.request('/api/scoregoods/confirmOrder', 'POST', {
							id
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								this.getDetail()
							}
						})
					}
				})
			},
			delitem(id) {
				httpRequest.modal('提示', '确认删除当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/scoregoods/delOrder', 'POST', {
							id
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								setTimeout(()=>{
									uni.navigateBack(1)
								},1000)
							}
						})
					}
				})
			},
			cancelitem(id) {
				httpRequest.modal('提示', '确认取消当前订单吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/scoregoods/cancelOrder', 'GET', {
							id
						}, false, false, true).then(res => {
							httpRequest.toast(res.msg)
							if (res.code == 1) {
								this.getDetail()
							}
						})
					}
				})
			},
			getDetail() {
				httpRequest.request('/api/scoregoods/getOrderInfo', 'GET', {
					id: this.listid
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-count-down__text {
		color: #ff0000
	}

	page {
		background-color: #f9f9f9;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>